<template>
    <!-- 初步诊断 心内科 -->
    <div>
        <div class="header">
            <div class="header-left">
                <image :src="titleleftimg" class="header-left-img" @click="finishpage"></image>
            </div>
            <div class="header-center">
                <text class="header-text">会诊申请</text>
            </div>
            <div class="header-right-left">
                <text class="header-right-left-text">值班电话:{{callPhoto}}</text>
            </div>
            <div class="header-right">
                <text class="header-right-text" @click="reqConsultation">确认发起会诊</text>
            </div>
        </div>
        <list>
            <cell>
                <div class="content">
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">会诊信息</text>
                            </div>

                        </div>
                        <div class="line">
                            <div class="title">
                                <text class="box-text">患者信息</text>
                            </div>

                        </div>
                    </div>
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">会诊目的</text>
                            </div>
                            <div class="input mr-20">
                                <input type="text" class="input-text" @input="onInputAim" :value="aim"></input>
                            </div>
                            <image :src="mustImg" class="mustTime"></image>
                        </div>
                        <div class="line">
                            <div class="title">
                                <text class="box-text">姓名</text>
                            </div>
                            <div class="input mr-20">
                                <input type="text" class="input-text" @input="onInputName" :value="aidname"></input>
                            </div>
                            <image :src="mustImg" class="mustTime"></image>
                        </div>
                    </div>
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">会诊方式</text>
                            </div>
                            <div class="checkbox" :class="[huizhen===1?'box-active':'']" @click="huizhen=1">
                                <text class="checkbox-text" :class="[huizhen===1?'box-text-active':'']">图文会诊</text>
                            </div>
                            <div class="checkbox mf-14 mr-30" :class="[huizhen===2?'box-active':'']" @click="huizhen=2">
                                <text class="checkbox-text" :class="[huizhen===2?'box-text-active':'']">视频会诊</text>
                            </div>
                        </div>
                        <div class="line">
                            <div class="title">
                                <text class="box-text">性别</text>
                            </div>
                            <div class="checkbox" :class="[gender===0?'box-active':'']" @click="gender=0">
                                <text class="checkbox-text" :class="[gender===0?'box-text-active':'']">男</text>
                            </div>
                            <div class="checkbox mf-14 mr-30" :class="[gender===1?'box-active':'']" @click="gender=1">
                                <text class="checkbox-text" :class="[gender===1?'box-text-active':'']">女</text>
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">会诊类型</text>
                            </div>
                            <div class="checkbox " :class="[category===0?'box-active':'']" @click="worry0">
                                <text class="checkbox-text" :class="[category===0?'box-text-active':'']">普通会诊</text>
                            </div>
                            <div class="checkbox mf-14" :class="[category===1?'box-active':'']" @click="worry1">
                                <text class="checkbox-text" :class="[category===1?'box-text-active':'']">急诊会诊</text>
                            </div>
                            <div class="checkbox mf-14 mr-30" :class="[category===2?'box-active':'']" @click="worry2">
                                <text class="checkbox-text" :class="[category===2?'box-text-active':'']">远程查房</text>
                            </div>
                        </div>
                        <div class="line">
                            <div class="title">
                                <text class="box-text">年龄</text>
                            </div>
                            <div class="input mr-30">
                                <input type="number" class="input-text" @input="onInputAge" :value="age"></input>
                            </div>
                        </div>
                    </div>
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">医生级别</text>
                            </div>
                            <div class="checkbox " :class="[level===0?'box-active':'']" @click="level0">
                                <text class="checkbox-text" :class="[level===0?'box-text-active':'']">普通</text>
                            </div>
                            <div class="checkbox mf-14 mr-30" :class="[level===1?'box-active':'']" @click="level1">
                                <text class="checkbox-text" :class="[level===1?'box-text-active':'']">专家</text>
                            </div>
                        </div>
                        <div class="line">
                            <!-- <div class="title">
                                 <text class="box-text">会诊价格</text>
                             </div>
                             <div class="title">
                                 <text class="box-text text-blue">￥{{moneys}}</text>
                             </div>-->
                        </div>
                    </div>
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">会诊医生</text>
                            </div>
                            <div class="input mr-20" @click="onSelectDoctor">
                                <text class="input-text">{{aimDoctorName}}</text>
                            </div>
                            <image :src="mustImg" class="mustTime"></image>
                        </div>
                        <div class="line"></div>
                    </div>
                    <div class="box" v-if="category ==0 ||category ==2">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">预约时间</text>
                            </div>
                            <div class="input mr-15" @click="huizhenTime">
                                <text class="input-text">{{timess}}</text>
                            </div>
                            <image :src="pickerTime" class="pickerTime mr-20" @click="huizhenTime"></image>
                            <image :src="mustImg" class="mustTime"></image>
                        </div>
                        <div class="line">
                        </div>
                    </div>
                    <!--<div class="line">
                        <div class="button box-active">
                            <text class="box-text box-text-active">{{callPhoto}}</text>
                        </div>
                    </div>-->
                    <div class="box-textarea">
                        <div class="line-textarea">
                            <div class="title-textarea">
                                <text class="box-text">初步诊断</text>
                            </div>
                            <textarea class="textarea" row="2" @input="onInputDiagnosis" :value="diagnosis"></textarea>
                        </div>
                    </div>
                    <div class="box">
                        <div class="line">
                            <div class="title">
                                <text class="box-text">添加附件</text>
                            </div>
                            <div class="checkbox" @click="pickImage">
                                <text class="checkbox-text">照片</text>
                            </div>
                            <div class="checkbox mf-14" @click="captureImage">
                                <text class="checkbox-text">拍照</text>
                            </div>
                            <div class="checkbox mf-14 " @click="yunImage">
                                <text class="checkbox-text">影像</text>
                            </div>
                            <div class="checkbox mf-14 " @click="onSelectOtherFile">
                                <text class="checkbox-text">其他</text>
                            </div>
                        </div>
                        <div class="line"></div>
                    </div>
                </div>
            </cell>
            <cell class="banner-tab">
                <div class="tab" v-for="(attach,index) in attachments" :key="index">
                    <image :src="attach.fileUrl" class="img"></image>
                    <div class="tab-detel" @click="delattrach(index)">
                        <text class="tab-detel-text">X</text>
                    </div>
                </div>
            </cell>
            <cell class="banner-tab">
                <div class="file" v-for="(attrachFile,index) in attachmentsFile" :key="index">
                    <text>{{attrachFile.title}}</text>
                    <div class="tab-detel" @click="delattrachFile(index)">
                        <text class="tab-detel-text">X</text>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>
<script>
    import Resource from "../../../dist/res/Resource";
    import WeexNativeModule from "../../common/WeexNativeModule";
    import DateUtil from "../../common/DateUtil";

    const picker = weex.requireModule('picker')
    let modal = weex.requireModule('modal')
    let nativemodule = weex.requireModule("acmedEventModule");
    import weexNativeModule from "../../common/WeexNativeModule";

    export default {
        name: 'EMNewMainEditInfo',
        data: function () {
            return {
                titleleftimg: Resource.getResource("title_cha_img.png"),
                pickerTime: Resource.getResource("aimDoctorName.png"),
                mustImg: Resource.getResource("must.png"),
                huizhen: 1,
                category: 0,
                gender: 0,
                level: 0,
                aim: '',
                age: '',
                aidname: '',
                aimDoctorId: '',
                aimDoctorName: '',
                aimHospitalId: '',
                applyDoctorId: '',
                applyDoctorName: '',
                applyHospitalId: 1,
                attachments: [],
                attachmentsFile: [],
                idCard: "",
                diagnosis: "",
                timess: '',
                moneys: '300',
                callPhoto: '',
                normalDoctorId: "",
                normalDoctorName: "",
                normalDoctorHospitalId: "",
                seletedtime: "",
                huizhengtime: "",
                publicAttachments: []
            }
        },
        mounted: function () {
            var _self = this
            nativemodule.callNative("userinfo", "", function (event) {
//                weexNativeModule.alert(event)
                _self.applyDoctorId = event.id
                _self.applyDoctorName = event.username
                _self.applyHospitalId = event.virtualDeptId
                _self.callPhoto = event.virtualparentPhonenum;
                //nativemodule.callNative("toast",event,null);

            });
            nativemodule.callNative("hasyundata", "", function (yundata) {
                if (yundata) {
                    var idx = yundata.age.indexOf("岁");
                    var c_age = idx > 0 ? yundata.age.substring(0, idx) : yundata.age
                    _self.gender = parseInt(yundata.gender)
                    _self.aidname = yundata.username
                    _self.age = c_age
                    _self.idCard = yundata.idcard
                    _self.attachments = [{
                        category: "2",
                        title: "影像",
                        fileUrl: yundata.thumbnail,
                        hospitalId: _self.aimHospitalId,
                        belongTo: yundata.studyiuid
                    }]
                    _self.publicAttachments.push({
                        category: "2",
                        title: "影像",
                        fileUrl: yundata.thumbnail,
                        hospitalId: _self.aimHospitalId,
                        belongTo: yundata.studyiuid
                    })
                }
//                nativemodule.callNative("toast",yundata.username,null)
            });
//            weexNativeModule.alert(1)
            weexNativeModule.getParam(function (res) {
//                weexNativeModule.alert(res)
                _self.normalDoctorId = res.normalDoctorId;
                _self.normalDoctorName = res.normalDoctorName;
                _self.normalDoctorHospitalId = res.normalDoctorHospitalId;
                _self.aimDoctorId = res.normalDoctorId;
                _self.aimDoctorName = res.normalDoctorName;
                _self.aimHospitalId = res.normalDoctorHospitalId;
            })
        },
        methods: {
            buttonClicked() {
                this.isShow = true;
            },
            overlayClicked() {
                this.isShow = false;
            },
            finishpage() {
                nativemodule.callNative("finish", null, null)
            },
            onInputAim: function (event) {
                this.aim = event.value
            },
            onInputName: function (event) {
                this.aidname = event.value
            },
            onInputAge: function (event) {
                this.age = event.value
            },
            onInputDiagnosis: function (event) {
                this.diagnosis = event.value
            },
            onSelectDoctor: function (event) {
                var _self = this
                if (_self.level == 1) {
                    nativemodule.callNative("selectDoctor", "selectDoctor", function (event) {
                        weexNativeModule.alert(event)
                        _self.aimDoctorId = event.userId
                        _self.aimDoctorName = event.userName
                        _self.aimHospitalId = event.hospitalId
                        _self.huizhengtime = event.datetime;
                        _self.timess = event.datetime + " 00:00";
//                    nativemodule.callNative("toast",event,null);
                    })
                }
            },
            onSelectOtherFile: function () {
                var _self = this;
                nativemodule.callNative("selectOtherFile", "selectOtherFile", function (event) {
                    var attrachFile = {
                        category: "3",
                        title: event.filename,
                        fileUrl: event.ImagePath,
                        hospitalId: _self.aimHospitalId
                    }
//                    nativemodule.callNative("toast",attrach,null);
                    _self.attachmentsFile.push(attrachFile)
                    _self.publicAttachments.push(attrachFile)
                });
            },
            pickImage: function (event) {
                var _self = this;
                nativemodule.callNative("pickImage", "pickImage", function (event) {
                    var attrach = {
                        category: "0",
                        title: "图片",
                        fileUrl: event.ImagePath,
                        hospitalId: _self.aimHospitalId
                    }
//                    nativemodule.callNative("toast",attrach,null);
                    _self.attachments.push(attrach)
                    _self.publicAttachments.push(attrach)
                });
            },
            captureImage: function (event) {
                var _self = this;
                nativemodule.callNative("captureImage", "captureImage", function (event) {
                    var attrach = {
                        category: "1",
                        title: "照片",
                        fileUrl: event.ImagePath,
                        hospitalId: _self.aimHospitalId
                    }
//                    nativemodule.callNative("toast",attrach,null);
                    _self.attachments.push(attrach)
                    _self.publicAttachments.push(attrach)
                });
            },
            yunImage: function (event) {
                var _self = this;
                nativemodule.callNative("yunImage", "yunImage", function (event) {
                    var attrach = {
                        category: "2",
                        title: "影像",
                        fileUrl: event.thumbnail,
                        hospitalId: _self.aimHospitalId,
                        belongTo: event.studyiuid
                    }
                    _self.attachments.push(attrach)
                    _self.publicAttachments.push(attrach)
                });
            },
            delattrach: function (index) {
                this.attachments.splice(index, 1)
            },
            delattrachFile: function (index) {
                this.attachmentsFile.splice(index, 1)
            },
            reqConsultation: function () {
                var _self = this
                if (_self.aim == '' || _self.aim.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    modal.alert({
                        message: '请输入会诊目的!',
                        duration: 0.3
                    })
                    return
                }
                if (_self.aidname == '' || _self.aidname.replace(/(^\s*)|(\s*$)/g, "") == "") {
                    modal.alert({
                        message: '请输入患者姓名',
                        duration: 0.3
                    })
                    return
                }
                if (_self.aimDoctorName == '') {
                    modal.alert({
                        message: '请选择会诊医生!',
                        duration: 0.3
                    })
                    return
                }
                if (_self.category == 0 || _self.category == 2) {
                    if (_self.level == 0) {
                        if (_self.timess == '') {
                            modal.alert({
                                message: '请选择预约时间!',
                                duration: 0.3
                            })
                            return
                        }
                    }
                }



                //nativemodule.callNative("toast",this.aim +' '+this.aidname,null);

                var reqparam = {
                    address: "明基医院急诊科",
                    age: _self.age == '' ? '0' : _self.age,
                    aim: _self.aim.replace(/ /g, ''),
                    aimDoctorId: _self.aimDoctorId,
                    aimDoctorName: _self.aimDoctorName,
                    aimHospitalId: _self.aimHospitalId,
                    applyDoctorId: _self.applyDoctorId,
                    applyDoctorName: _self.applyDoctorName,
                    applyHospitalId: _self.applyHospitalId,
                    chiefComplaint: "",
                    consultationMode: _self.huizhen,
                    diagnosis: _self.diagnosis,
                    gender: _self.gender,
                    idCard: (_self.idCard == '' || _self.idCard == 'undefined' || _self.idCard == null )
                        ? '320501191812129088' : _self.idCard,
                    userName: _self.aidname.replace(/ /g, ''),
                    attachments: _self.publicAttachments,
                    category: _self.category,
                    isExpert: _self.level,
                }

                if (_self.category == 0 || _self.category == 2) {
                    reqparam.status = 3;
                    reqparam.appointmentTime = _self.timess;
                }

                nativemodule.callNative("reqconsultation", reqparam, function (msg) {
                    modal.alert({
                        message: msg,
                        duration: 0.3
                    })
                });
            },
            huizhenTime: function () {
                let _self = this
                let defaultdate
                if (_self.seletedtime) {
                    defaultdate = DateUtil.formatTime(
                        new Date(_self.seletedtime), 'yyyy-MM-dd hh:mm:ss');
                } else {
                    defaultdate = DateUtil.formatTime(
                        new Date(), 'yyyy-MM-dd hh:mm:ss');
                }
//                WeexNativeModule.alert(defaultdate);
                WeexNativeModule.selectDateTime(defaultdate, false, false, false, true, true, false, false, "", "", function (time) {
                    _self.seletedtime = DateUtil.formatTime(time.data, 'yyyy-MM-dd hh:mm:ss')
                    _self.timess = _self.huizhengtime + " " + DateUtil.formatTime(time.data, 'hh:mm')
                    if (_self.level == 0) {
                        _self.timess = DateUtil.formatTime(new Date(), 'yyyy-MM-dd') + " " + DateUtil.formatTime(time.data, 'hh:mm')
                    }
                })
            },
            level0: function () {
                var _self = this
                _self.moneys = 300
                _self.level = 0
                _self.aimDoctorId = _self.normalDoctorId
                _self.aimDoctorName = _self.normalDoctorName
                _self.aimHospitalId = _self.normalDoctorHospitalId
                _self.timess = ''
            },
            level1: function () {
                var _self = this
                _self.aimDoctorId = ""
                _self.aimDoctorName = ""
                _self.aimHospitalId = ""
                _self.moneys = 500
                _self.level = 1
                _self.timess = ''
                _self.onSelectDoctor();
            },
            worry0: function () {
                var _self = this
                _self.category = 0
                _self.level = 0
                _self.timess = ''
                _self.aimDoctorName = _self.normalDoctorName
            },
            worry1: function () {
                var _self = this
                _self.category = 1
                _self.level = 0
                _self.timess = ''
                _self.aimDoctorName = _self.normalDoctorName
            },
            worry2: function () {
                var _self = this
                _self.category = 2
                _self.level = 0
                _self.timess = ''
                _self.aimDoctorName = _self.normalDoctorName
            }
        }
    }
</script>
<style>
    .header {
        height: 40px;
        background-color: #fff;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #ccc;
    }

    .header-left {
        margin-left: 20px;
        margin-right: 50px;
    }

    .header-left-img {
        width: 30px;
        height: 30px;
    }

    .header-right {
        width: 100px;
        height: 25px;
        background-color: #4c7fd8;
        margin-right: 20px;
        border-radius: 2px;
        color: #fff;
    }

    .header-text {
        font-size: 13px;
        color: #666;
    }

    .header-right-left-text {
        font-size: 10px;
        color: #999;
    }

    .header-right-text {
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 25px;
    }

    .banner-tab {
        width: 750px;
        flex-direction: row;
        flex-wrap: wrap;
        padding-left: 88px;
        padding-right: 105px;
        padding-bottom: 20px;
        box-sizing: border-box;
    }

    .tab {
        position: relative;
        width: 60px;
        height: 60px;
        background-color: #f2f2f2;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .file {
        position: relative;
        background-color: #f2f2f2;
        padding-top: 5px;
        padding-bottom: 5px;
        padding-left: 10px;
        padding-right: 20px;
        margin-right: 5px;
        margin-bottom: 5px;
    }

    .tab-text {
        text-align: center;
        font-size: 12px;
        color: #666;
    }

    .tab-active {
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: #4c7fd8;
    }

    .content {
        padding-left: 20px;
        /*padding-right: 20px;*/
        box-sizing: border-box;
    }

    .box {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 40px;
        align-items: center;
        position: relative;
    }

    .box-big {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

    .box-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 60px;
        margin-top: 9px;
    }

    .box-max {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        height: 90px;
        justify-content: space-between;
    }

    .box-max-left {
        flex: 1;
        display: flex;
    }

    .box-max-right {
        flex: 1;
        box-sizing: border-box;

    }

    .box-max-right-box {
        background-color: #f2f2f2;
        height: 70px;
        border-radius: 3px;
        margin-right: 70px;
        margin-top: 5px;
    }

    .box-max-left-top {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }

    .box-max-left-bottom {
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 70px;
    }

    .box-text {
        font-size: 12px;
        color: #666;
    }

    .line {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        box-sizing: border-box;
        margin-right: 20px;
    }

    .line-hide {
        flex: 0;
        height: 0px;
        margin-right: 0px;
    }

    .line-textarea {
        flex: 1;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
        box-sizing: border-box;
        padding-right: 20px;
    }

    .title {
        padding-right: 20px;
    }

    .title-max {
        width: 120px;
    }

    .title-auto {
        margin-right: 5px;
    }

    .title-textarea {
        /*width: 80px;*/
        padding-top: 8px;
        padding-right: 20px;
    }

    .input {
        position: relative;
        flex: 1;
        box-sizing: border-box;
        padding-left: 8px;
        height: 25px;
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
    }

    .input-text {
        color: #666;
        line-height: 22px;
        font-size: 12px;
    }

    .input-unit {
        position: absolute;
        color: #666;
        font-size: 12px;
        top: 4px;
        right: 8px;
    }

    .mr-20 {
        margin-right: 20px;
    }

    .mr-30 {
        margin-right: 30px;
    }

    .mr-15 {
        margin-right: 15px;
    }

    .header-center {
        margin-left: 210px;
        margin-right: 40px;
    }

    .text-blue {
        color: #556ce7;
    }

    .checkbox {
        -webkit-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
        height: 25px;
        background-color: #f2f2f2;
        border-radius: 3px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .checkbox-text {
        font-size: 12px;
        color: #666;
    }

    .mf-14 {
        margin-left: 14px;
    }

    .box-active {
        background-color: #4c7fd8;
    }

    .box-text-active {
        color: #FFF;
    }

    .tab-detel {
        width: 10px;
        height: 10px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        position: absolute;
        top: 3px;
        right: 3px;
    }

    .tab-detel-text {
        font-size: 8px;
        color: #b1b1b1;
    }

    .textarea {
        box-sizing: border-box;
        flex: 1;
        border-radius: 5px;
        border-style: solid;
        border-width: 0.5px;
        border-color: #b1b1b1;
        font-size: 12px;
        height: 40px;
        padding-left: 3px;
        padding-top: 3px;
    }

    .img {
        width: 60px;
        height: 60px;
    }

    .imgs {
        width: 25px;
        height: 25px;
    }

    .button {
        padding-top: 4px;
        padding-bottom: 4px;
        padding-left: 8px;
        padding-right: 8px;
        flex: 1;
        border-radius: 3px;
        justify-content: center;
        align-items: center;
        position: fixed;
        z-index: 9999;
        right: 20px;
        bottom: 60px;
    }

    .pickerTime {
        width: 15px;
        height: 15px;
    }

    .mustTime {
        width: 10px;
        height: 10px;
    }

</style>